<script setup>

const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  },
})
</script>

<template>
  <template v-for="item in menuList">
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path?item.path:item.index">
      <template #title>
        <el-icon v-if="item.icon">
          <component :is="item.icon" class="menu-icon"/>
        </el-icon>
        <span class="menu-title">{{ item.name }}</span>
      </template>
      <MenuItem :menu-list="item.children"></MenuItem>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path?item.path:item.index">
      <el-icon v-if="item.icon">
        <component :is="item.icon" class="menu-icon"/>
      </el-icon>
      <span class="menu-title">{{ item.name }}</span>
    </el-menu-item>
  </template>
</template>

<style scoped>
.menu-title {
  height: 28px;
  font-size: 28px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  color: rgb(90, 94, 124);
}

.menu-icon {
  width: 28px;
  height: 28px;
}
</style>